<!-- 企业列表 -->
<template>
    <!-- 筛选条件 -->
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="企业名称" prop="companyId">
            <el-select filterable clearable v-model="formInline.companyId">
                <el-option v-for="item in companyNameList" :label="item.name" :value="item.id" :key="item.id" />
            </el-select>
        </el-form-item>
        <el-form-item label="企业类型">
            <el-select clearable filterable v-model="formInline.companyType" placeholder="请选择企业类型">
                <el-option label="奶牛" :value="2" />
                <el-option label="肉牛" :value="3" />
            </el-select>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" icon="Search" @click="search">查询</el-button>
            <el-button type="success" icon="Plus" @click="isShow = true">新增</el-button>
        </el-form-item>
    </el-form>

    <!-- 表格 -->
    <el-table :data="companyList" stripe border style="width: 100%;">
        <el-table-column label="序号"  width="70px" type="index" />
        <el-table-column prop="name" label="企业名称" width="220" show-overflow-tooltip />
        <el-table-column prop="" label="类型" width="80">
            <template #default="scope">
                <el-tag effect="dark" type="primary" v-if="scope.row.type == 1">平台</el-tag>
                <el-tag effect="dark" type="success" v-if="scope.row.type == 2">奶牛</el-tag>
                <el-tag effect="dark" type="danger" v-if="scope.row.type == 3">肉牛</el-tag>
            </template>
        </el-table-column>
        <el-table-column prop="address" label="厂址" width="220" show-overflow-tooltip />
        <el-table-column prop="buildDate" label="建厂时间" width="150" />
        <el-table-column prop="contactPhone" label="负责人手机号" width="150" />
        <el-table-column prop="contactUsername" label="负责人" width="100" />
        <el-table-column prop="enable" label="是否启用" width="100">
            <template #default="scope">
                <el-switch
                    v-model="scope.row.enable"
                    inline-prompt
                    active-text="启用"
                    inactive-text="禁用"
                />
            </template>
        </el-table-column>
        <el-table-column prop="farmCode" label="企业代码" />
        <el-table-column label="操作" :width="tdWidthItem">
            <template #default="scope">
                <div ref="tdWidth" style="display: inline-block; white-space: normal;">
                <el-button type="primary" icon="Tickets" size="small" @click="detailsItem(scope.row.id)">详情</el-button>
                <el-button type="success" icon="Edit" size="small" @click="editCompany(scope.row)">编辑</el-button>
                <el-button type="info" icon="Tickets" size="small" @click="viewAccountList(scope.row)">账号列表</el-button>
                <el-button icon="Download" size="small">导出</el-button>
                </div>
            </template>
        </el-table-column>
    </el-table>
    <br/>
    <!-- 分页器 -->
    <el-pagination
        v-model:currentPage="pageNo"
        v-model:page-size="limit"
        :page-sizes="[15, 30, 50, 100]"
        :small="false"
        :background="true"
        layout="prev, pager, next, jumper, ->, sizes, total"
        :total="total"
        @current-change="getCompanyList"
        @size-change="sizeChange"
    />

    <!-- 新增 -->
    <addList :isShow="isShow" @closeAddDialog="changeDialogAddVisible"></addList>
    <!-- 编辑 -->
    <editList :isEditShow="isEditShow" :companyId="companyId" @closeEditDialog="changeDialogEditVisible"></editList>
    <!-- 查看账号列表 -->
    <accountList :isAccountListShow="isAccountListShow" :listId="listId" @closeAccountListDialog="closeAccountListVisible"></accountList>
    <!-- 详情 -->
    <detail :isDetailsShow="isDetailsShow" :detailsId="detailsId" @closeDetailsDialog="closeDetailsDialog"></detail>
</template>

<script setup>
    import { ref, reactive, onMounted } from 'vue'
    import { reqGetCompanyList, reqGetCompanyNameList } from '@/api/company'
    import addList from './add/index.vue'
    import editList from './edit/index.vue'
    import accountList from './accountList/index.vue'
    import detail from './details/index.vue'

    // 分页器当前页码
    let pageNo = ref(1)
    // 每一页展示多少条数据
    let limit = ref(15)
    // 数据总条数
    let total = ref(0)

    // 表单收集
    const formInline = reactive({
        companyId: '', // 企业id
        companyType: '', // 企业类型 1-平台、2-奶牛、3-肉牛
        sortName: '', // 排序字段名称
        sortType: '', // 排序类型：ascending-正序、descending-倒序、null 无
        pageNumber: pageNo.value, // 页号
        pageSize: limit.value
    })

    // 查询按钮
    const search = () => {
        getCompanyList()
    }

    // 新增dialog弹窗，显示与隐藏
    let isShow = ref(false)
    // 编辑dialog弹窗，显示与隐藏
    let isEditShow = ref(false)
    // 查看账号列表dialog弹窗，显示与隐藏
    let isAccountListShow = ref(false)
    // 详情dialog弹窗，显示与隐藏
    let isDetailsShow = ref(false)

    // 自定义事件，新增弹窗关闭
    const changeDialogAddVisible = (val) => {
        getCompanyList() // 更新列表
        isShow.value = val
    }
    // 自定义事件，编辑弹窗关闭
    const changeDialogEditVisible = (val) => {
        getCompanyList()
        isEditShow.value = val
    }

    // 自定义事件，关闭账号列表弹窗
    const closeAccountListVisible = (val) => {
        isAccountListShow.value = val
    }

    // 自定义事件，关闭详情弹窗
    const closeDetailsDialog = (val) => {
        isDetailsShow.value = val
    }
    
    // 获取企业列表
    let companyList = ref([])
    const getCompanyList = async () => {
        let res = await reqGetCompanyList(formInline)
        total.value = res.data.totalRow // 赋值数据总条数
        companyList.value = res.data.records // 赋值表格数据
        console.log('企业列表', res)
    }

    // 获取企业下拉列表数据
    let companyNameList = ref([])
    const getCompanyNameList = async () => {
        let res = await reqGetCompanyNameList()
        companyNameList.value = res.data
    }

    // 详情按钮
    let detailsId = ref('')
    const detailsItem = (id) => {
        detailsId.value = id
        isDetailsShow.value = true
    }

    // 编辑按钮
    let companyId = ref('') // 企业id
    const editCompany = (row) => {
        companyId.value = row.id
        isEditShow.value = true
    }

    // 查看账号列表
    let listId = ref('')
    const viewAccountList = (row) => {
        listId.value = row.id
        isAccountListShow.value = true
    }

    // 分页的下拉菜单发生改变时触发
    const sizeChange = () => {
        pageNo.value = 1
        getCompanyList()
    }

    // 组件挂载完毕
    onMounted(() => {
        getCompanyList()
        getCompanyNameList()
        widthAuto()
    })

    // 设置操作栏按钮，宽度自适应
const tdWidthItem = ref(400)
const tdWidth = ref()
const widthAuto = () => {
    setTimeout(() => {
        tdWidthItem.value = tdWidth.value.offsetWidth + 30
    }, 500)
}
</script>

<style scoped lang="scss">
.demo-form-inline .el-input {
  --el-input-width: 220px;
}

.demo-form-inline .el-select {
  --el-select-width: 220px;
}
</style>